<template>
  <div>
    <el-row>
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          【题型】 : {{ questionTypeHandler(quesData.questionType) }}
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple-light">
          【编号】:{{ quesData.id }}
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          【难度】:{{ difficultyHandler(quesData.difficulty) }}
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple-light">
          【标签】:
          {{ quesData.tags }}
        </div></el-col
      >
    </el-row>
    <el-row>
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          【学科】 : {{ quesData.subjectName }}
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple-light">
          【目录】: {{ quesData.directoryName }}
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          【方向】: {{ quesData.direction }}
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple-light"></div
      ></el-col>
    </el-row>
    <hr />
    <div>
      <p>【提干】:</p>
      <el-link type="primary"
        >{{ html2TextHandler(quesData.question) }}
      </el-link>
      <p v-if="Number(quesData.questionType) !== 3">
        {{ questionTypeHandler(quesData.questionType) }}
        选项:(以下选中的选项为正确答案)
      </p>
      <div v-for="item in quesData.options" :key="item.id">
        <!-- <el-radio-group v-model="quesData.options">
          <el-radio
            style="display: block; margin-top: 10px"
            v-for="item in quesData.options"
            :key="item.id"
            :label="item.title"
          ></el-radio>
        </el-radio-group> -->
        <div v-if="Number(quesData.questionType) === 1">
          <input
            type="radio"
            :checked="item.isRight === 1"
            style="display: inline-block; margin-top: 10px; margin-right: 10px"
          />
          <span> {{ item.title }} </span>
        </div>
        <div v-if="Number(quesData.questionType) === 2">
          <input
            type="checkbox"
            :checked="Number(item.isRight) !== 0"
            style="display: inline-block; margin-top: 10px; margin-right: 10px"
          />
          <span>{{ item.title }} </span>
        </div>
      </div>
    </div>
    <hr />
    <p>
      【参考答案】:
      <el-button type="danger" @click="showVideo = true"
        >视频答案预览</el-button
      >
    </p>
    <video
      v-if="showVideo"
      :src="quesData.videoURL"
      controls
      autoplay
      loop
      width="300px"
      height="300px"
    ></video>
    <hr />
    <p>【答案解析】 : {{ quesData.chkRemarks }}</p>
    <hr />
    <p>【题目备注】: {{ quesData.remarks }}</p>
  </div>
</template>
<script>
import { html2Text } from '@/utils/index.js'

export default {
  name: '',
  data () {
    return {
      quesData: {},
      showVideo: false,
      radio: '1'
    }
  },
  created () {},
  computed: {},
  methods: {
    html2TextHandler (text) {
      return html2Text(text)
    },
    questionTypeHandler (num) {
      // console.log(obj, num, 734435)
      // if (Number(num) === 1 || Number(num) === 2 || Number(num) === 3) {
      //   const obj = questionType.find((item) => item.value === Number(num))
      //   return obj.label
      // } else {
      //   return '未知'
      // }
      if (Number(num) === 1) {
        return '单选'
      } else if (Number(num) === 2) {
        return '多选'
      } else if (Number(num) === 3) {
        return '简答'
      } else {
        return '未知'
      }
    },
    difficultyHandler (num) {
      if (Number(num) === 1) {
        return '简单'
      } else if (Number(num) === 2) {
        return '一般'
      } else if (Number(num) === 3) {
        return '困难'
      } else {
        return '未知'
      }
    }
  }
}
</script>
<style scoped>
.grid-content {
  font-size: 18px;
}
.el-row {
  margin: 15px 0;
}
</style>
